<template>
  <el-card class="content">
    <el-form inline>
      <el-form-item label="企业">
        <el-input
          placeholder="请输入企业名"
          size="mini"
          v-model="query.unitName"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="getEnterpriseInfoListPage"
          >查询</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addUnitInfor"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <p class="bg-purple">企业信息列表</p>
    <el-table
      stripe
      size="small"
      class="el-table-box"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :data="enterpriseInfoList"
    >
      <el-table-column
        prop="unitName"
        label="企业名称"
        align="center"
      ></el-table-column>
      <el-table-column prop="unitAddress" label="企业地址" align="center">
      </el-table-column>
      <el-table-column prop="unitPerson" label="法人代表" align="center">
      </el-table-column>
      <el-table-column prop="unitPersonTel" label="法人代表电话" align="center">
      </el-table-column>
      <el-table-column prop="businessLicense" label="营业执照" align="center">
      </el-table-column>
      <el-table-column
        prop="registrationAuthority"
        label="工商登记机关"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="miningLicense" label="采矿许可证" align="center">
      </el-table-column>
      <el-table-column prop="miningAuthority" label="登记机关" align="center">
      </el-table-column>
      <el-table-column prop="industryGroup" label="所属行业" align="center">
      </el-table-column>
      <el-table-column
        prop="enterpriseNatureGroup"
        label="企业性质"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
      ></el-table-column>
      <el-table-column prop="address" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="updateRoleInfo(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="delUser(scope.row.unitId)"
            >删除</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="getUnitAuthorizations(scope.row)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <!-- 新增企业信息 -->
    <el-dialog
      title="添加企业信息"
      :visible.sync="addDialogVisible"
      width="40%"
      @close="closeDialogVisible"
    >
      <el-form
        :model="addListForm"
        ref="addListForm"
        size="medium"
        label-width="0.55rem"
        inline
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="unitName">
              <el-input
                v-model="addListForm.unitName"
                placeholder="请填写企业名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业地址" prop="tailingAreaName">
              <el-select
                style="width: 0.6rem"
                v-model="addListForm.provinceName"
                placeholder="请选择省份（直辖市）"
                @change="renderCity($event)"
                clearable
              >
                <el-option
                  v-for="item in provinceListAll"
                  :key="item.id"
                  :value="item.provinceName"
                  :label="item.provinceName"
                >
                </el-option>
              </el-select>
              <el-select
                style="width: 0.6rem"
                v-model="addListForm.cityName"
                placeholder="请选择城市"
                clearable
              >
                <el-option
                  v-for="item in cityListAll"
                  :key="item.areaId"
                  :value="item.cityName"
                  :label="item.cityName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="法人代表" prop="unitPerson">
              <el-input
                v-model="addListForm.unitPerson"
                placeholder="请填写法人代表"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人代表电话" prop="unitPersonTel">
              <el-input
                v-model="addListForm.unitPersonTel"
                placeholder="请填写法人代表电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照" prop="businessLicense">
              <el-input
                v-model="addListForm.businessLicense"
                placeholder="请填写营业执照"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工商登记机关" prop="registrationAuthority">
              <el-input
                v-model="addListForm.registrationAuthority"
                placeholder="请填写工商登记机关"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采矿许可证" prop="miningLicense">
              <el-input
                v-model="addListForm.miningLicense"
                placeholder="请填写采矿许可证"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记机关" prop="miningAuthority">
              <el-input
                v-model="addListForm.miningAuthority"
                placeholder="请填写登记机关"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industryGroup">
              <el-select
                v-model="addListForm.industryGroup"
                style="display: flex"
                placeholder="请选择所属行业"
              >
                <el-option
                  v-for="item in industryInvolvedAllList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业性质" prop="enterpriseNatureGroup">
              <el-select
                v-model="addListForm.enterpriseNatureGroup"
                style="display: flex"
                placeholder="请选择企业性质"
              >
                <el-option
                  v-for="item in enterpriseNatureAllList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="buttonfrom">
          <el-button type="primary" @click="addEnterpriseInfoList"
            >确 定</el-button
          >
          <el-button @click="closeDialogVisible">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改企业信息 -->
    <el-dialog
      title="修改企业信息"
      :visible.sync="editDialogVisible"
      width="40%"
    >
      <el-form
        :model="editListForm"
        ref="editListForm"
        label-position="left"
        inline
        label-width="0.55rem"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="unitName">
              <el-input
                v-model="editListForm.unitName"
                placeholder="请填写企业名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业地址" prop="tailingAreaName">
              <el-select
                style="width: 0.6rem"
                v-model="editListForm.provinceName"
                placeholder="请选择省份（直辖市）"
                @change="renderCity($event)"
                clearable
              >
                <el-option
                  v-for="item in provinceListAll"
                  :key="item.id"
                  :value="item.provinceName"
                  :label="item.provinceName"
                >
                </el-option>
              </el-select>
              <el-select
                style="width: 0.6rem"
                v-model="editListForm.cityName"
                placeholder="请选择城市"
                clearable
              >
                <el-option
                  v-for="item in cityListAll"
                  :key="item.areaId"
                  :value="item.cityName"
                  :label="item.cityName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="法人代表" prop="unitPerson">
              <el-input
                v-model="editListForm.unitPerson"
                placeholder="请填写法人代表"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人代表电话" prop="unitPersonTel">
              <el-input
                v-model="editListForm.unitPersonTel"
                placeholder="请填写法人代表电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照" prop="businessLicense">
              <el-input
                v-model="editListForm.businessLicense"
                placeholder="请填写营业执照"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工商登记机关" prop="registrationAuthority">
              <el-input
                v-model="editListForm.registrationAuthority"
                placeholder="请填写工商登记机关"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采矿许可证" prop="miningLicense">
              <el-input
                v-model="editListForm.miningLicense"
                placeholder="请填写采矿许可证"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记机关" prop="miningAuthority">
              <el-input
                v-model="editListForm.miningAuthority"
                placeholder="请填写登记机关"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industryGroup">
              <el-select
                v-model="editListForm.industryGroup"
                style="display: flex"
                placeholder="请选择所属行业"
              >
                <el-option
                  v-for="item in industryInvolvedAllList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业性质" prop="enterpriseNatureGroup">
              <el-select
                v-model="editListForm.enterpriseNatureGroup"
                style="display: flex"
                placeholder="请选择企业性质"
              >
                <el-option
                  v-for="item in enterpriseNatureAllList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="buttonfrom">
          <el-button type="primary" @click="isEditRoleInfo">确 定</el-button>
          <el-button @click="editDialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分配企业权限 -->
    <el-dialog
      title="分配企业权限"
      :visible.sync="unitDialogVisible"
      width="30%"
    >
      <el-tree
        :data="enterpriseAuthorizationList"
        ref="treeRef"
        show-checkbox
        node-key="id"
        check-strictly
        :render-after-expand="false"
        default-expand-all
        :props="treeProps"
        :default-checked-keys="unitAuthorizationsList"
        @check="getCurrentNode"
        style="display: block; height: 3rem; overflow-y: auto"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer" style="margin-right: 1rem">
        <el-button type="primary" @click="addRoleAuthorizations"
          >确 定</el-button
        >
        <el-button @click="unitDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getEnterpriseInfoListPage,
  getEnterpriseNatureAll,
  getIndustryInvolvedAll,
  getUnitAuthorizations,
  bindUnitAuthorizations,
  delEnterpriseInformationByUnitId,
  getAreaTreeList,
} from "../../api/user";
import axios from "axios";
export default {
  name: "RoleManagementChild",
  data() {
    return {
      query: {
        page: 1,
        pagesize: 10,
        unitName: "",
        authorizationIds: [],
      },
      total: null,
      enterpriseInfoList: [],
      addDialogVisible: false,
      addListForm: {
        unitName: "",
        unitAddress: "",
        unitPerson: "",
        unitPersonTel: "",
        businessLicense: "",
        registrationAuthority: "",
        miningLicense: "",
        miningAuthority: "",
        industryGroup: "",
        enterpriseNatureGroup: "",
        createTime: "",
        updateTime: "",
        provinceName: "", // 所属省市
        cityName: "", // 所属城市
      },
      editDialogVisible: false,
      editListForm: {
        unitId: null,
        unitName: "",
        provinceName: "", // 所属省市
        cityName: "", // 所属城市
        unitPerson: "",
        unitPersonTel: "",
        businessLicense: "",
        registrationAuthority: "",
        miningLicense: "",
        miningAuthority: "",
        industryGroup: "",
        enterpriseNatureGroup: "",
        updateTime: "",
      },
      enterpriseNatureAllList: [],
      industryInvolvedAllList: [],
      dialogWidth: null,
      // 添加角色表单验证
      rules: {
        unitName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        businessLicense: [
          { required: true, message: "请输入营业执照", trigger: "blur" },
        ],
        unitPerson: [
          { required: true, message: "请输入法人代表", trigger: "blur" },
        ],
        unitPersonTel: [
          { required: true, validator: this.checkPhone, trigger: "blur" },
        ],
        registrationAuthority: [
          { required: true, message: "请输入工商登记机关", trigger: "blur" },
        ],
        miningLicense: [
          { required: true, message: "请输入采矿许可证", trigger: "blur" },
        ],
        miningAuthority: [
          { required: true, message: "请输入登记机关", trigger: "blur" },
        ],
        industryGroup: [
          { required: true, message: "请选择所属行业", trigger: "change" },
        ],
        enterpriseNatureGroup: [
          { required: true, message: "请选择企业性质", trigger: "change" },
        ],
      },
      // 分配权限对话框是否隐藏
      unitDialogVisible: false,
      //  当前分配的角色id
      unitId: "",
      // 所有权限数据
      enterpriseAuthorizationList: [],
      // 树形控件的属性绑定对象
      treeProps: {
        label: "description",
        children: "children",
      },
      // 默认选中的节点id值数组
      unitAuthorizationsList: [],
      // 分配角色已有权限
      authorizationIds: [],
      provinceListAll: [], // 全国34个省份（包括直辖市）列表
      cityListAll: [], // 全国各个城市列表
    };
  },
  created() {
    this.$common.treeVisible = false;
    this.getEnterpriseInfoListPage();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth();
      })();
    };
    this.getEnterpriseNatureAll();
    this.getIndustryInvolvedAll();
    this.getAreaTreeList();
  },
  methods: {
    // 自定义手机验证规则
    checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error("不能为空"));
      } else {
        const reg =
          /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    },
    // 分页查询角色列表
    async getEnterpriseInfoListPage() {
      const res = await getEnterpriseInfoListPage({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        unitName: this.query.unitName,
      });
      if (res.resultCode == "200") {
        this.enterpriseInfoList = res.parameter.list;
        this.total = res.parameter.total;
      } else {
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
        this.enterpriseInfoList = [];
        this.total = 0;
      }
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getEnterpriseInfoListPage();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      this.query.page = val;
      this.getEnterpriseInfoListPage();
    },
    addUnitInfor() {
      this.addDialogVisible = true;
      this.getEnterpriseNatureAll();
      this.getIndustryInvolvedAll();
      this.getAreaTreeList();
    },
    // 企业性质列表类型
    async getEnterpriseNatureAll() {
      const res = await getEnterpriseNatureAll();
      this.enterpriseNatureAllList = res.parameter;
    },
    // 所属行业列表类型
    async getIndustryInvolvedAll() {
      const res = await getIndustryInvolvedAll();
      this.industryInvolvedAllList = res.parameter;
    },
    // 城市列表
    async getAreaTreeList() {
      const res = await getAreaTreeList();
      if (res.resultCode == "200") {
        this.provinceListAll = res.parameter.provinceDtoList;
      }
    },
    renderCity(val) {
      this.cityListAll = [];
      // 根据选择的省份，展示该省份相对应的城市列表，未选择省份时，不能选择城市
      for (let i = 0; i < this.provinceListAll.length; i++) {
        console.log(this.provinceListAll[i]);
        if (
          val == this.provinceListAll[i].provinceName &&
          val != null &&
          val != "" &&
          val != undefined
        ) {
          for (let j = 0; j < this.provinceListAll[i].cityDtoList.length; j++) {
            if (this.provinceListAll[i].cityDtoList != null) {
              this.cityListAll.push(this.provinceListAll[i].cityDtoList[j]);
            } else {
              this.cityListAll = [];
            }
          }
        }
      }
    },
    editCity(val) {
      for (let i = 0; i < this.provinceListAll.length; i++) {
        if (
          val == this.provinceListAll[i].provinceName &&
          val != null &&
          val != "" &&
          val != undefined
        ) {
          for (let j = 0; j < this.provinceListAll[i].cityDtoList.length; j++) {
            if (this.provinceListAll[i].cityDtoList != null) {
              this.cityListAll.push(this.provinceListAll[i].cityDtoList[j]);
            } else {
              this.cityListAll = [];
            }
          }
        }
      }
    },
    // 添加确定
    async addEnterpriseInfoList() {
      this.$refs.addListForm.validate(async (val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.addListForm)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/group/enterpriseInformationManagement/addEnterpriseInfo",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.getEnterpriseInfoListPage();
              this.$message({
                type: "success",
                message: "新增成功",
                offset: 400,
                duration: 1000,
              });
            } else if (res.data.resultCode == "400") {
              this.$message({
                type: "error",
                message: "新增失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
          this.addDialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: "请完善表单信息",
            offset: 400,
            duration: 500,
          });
        }
      });
    },
    //添加取消
    closeDialogVisible() {
      this.addDialogVisible = false;
      this.$refs.addListForm.resetFields();
    },
    // 将原数据回显
    updateRoleInfo(row) {
      this.editListForm.unitId = row.unitId;
      this.editListForm.unitName = row.unitName;
      this.editListForm.provinceName = row.provinceName;
      this.editListForm.cityName = row.cityName;
      this.editListForm.unitPerson = row.unitPerson;
      this.editListForm.unitPersonTel = row.unitPersonTel;
      this.editListForm.businessLicense = row.businessLicense;
      this.editListForm.registrationAuthority = row.registrationAuthority;
      this.editListForm.miningLicense = row.miningLicense;
      this.editListForm.miningAuthority = row.miningAuthority;
      this.editListForm.industryGroup = row.industryGroup;
      this.editListForm.enterpriseNatureGroup = row.enterpriseNatureGroup;
      this.editDialogVisible = true;
      this.editCity(this.editListForm.provinceName);
    },
    // 确定修改企业信息
    isEditRoleInfo() {
      this.$refs.editListForm.validate((valid) => {
        if (valid) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.editListForm)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/group/enterpriseInformationManagement/updateEnterpriseInfo",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == 200) {
              this.getEnterpriseInfoListPage();
              this.$message({
                type: "success",
                message: "修改成功",
                offset: 400,
                duration: 1000,
              });
            } else if (res.data.resultCode == "400") {
              this.$message({
                type: "error",
                message: "修改失败",
                offset: 400,
                duration: 1000,
              });
            }
            this.editDialogVisible = false;
          });
        } else {
          this.$message({
            type: "error",
            message: "请完成表单",
            offset: 400,
            duration: 1000,
          });
        }
      });
    },
    //删除企业信息
    async delUser(id) {
      console.log(id);
      const confirmResult = await this.$confirm(
        "此操作将强制永久删除该数据, 是否继续?",
        "提示",
        {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message({
          message: "已取消删除",
          type: "info",
          offset: 450,
          duration: 1000,
        });
      }
      await delEnterpriseInformationByUnitId({
        unitId: id,
      }).then((res) => {
        if (res.resultCode == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            offset: 450,
            duration: 1000,
          });
          this.getEnterpriseInfoListPage();
        } else if (res.resultCode == 410) {
          this.$message({
            message: "无权限删除",
            type: "warning",
            offset: 450,
            duration: 1000,
          });
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
            offset: 450,
            duration: 1000,
          });
        }
      });
    },
    // 获取分配权限的数据
    async getUnitAuthorizations(row) {
      this.unitId = row.unitId;
      const res = await getUnitAuthorizations({
        unitId: row.unitId,
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.enterpriseAuthorizationList =
          res.parameter.enterpriseAuthorizationList;
        this.unitAuthorizationsList = res.parameter.unitAuthorizationsList;
        // 递归获取三级节点的id
        this.getLeafKeys(row, this.unitAuthorizationsList);
        this.unitDialogVisible = true;
      } else {
        this.$message({
          message: "暂无分配权限数据",
          offset: 400,
          duration: 1000,
        });
        this.unitDialogVisible = false;
      }
    },
    // 通过递归获取角色三级权限id 并保存到unitAuthorizationsList数组中
    getLeafKeys(node, arr) {
      // 判断是否为三级节点
      if (!node.children) {
        return;
      }
      for (let i = 0; i < node.children.length; i++) {
        this.getLeafKeys(node.children[i], arr);
      }
    },
    // 父子节点不关联，但选择父节点---子节点全选
    getCurrentNode(data) {
      const node = this.$refs.treeRef.getNode(data);
      this.childNodes(node);
      this.parentNodes(node);
    },
    // 子节点
    childNodes(node) {
      const len = node.childNodes.length;
      for (let i = 0; i < len; i += 1) {
        node.childNodes[i].checked = node.checked;
        this.childNodes(node.childNodes[i]);
      }
    },
    // 父节点
    parentNodes(node) {
      if (node.parent) {
        for (const key in node) {
          if (key === "parent") {
            node[key].checked = true;
            this.parentNodes(node[key]);
          }
        }
      }
    },

    // 为角色分配权限
    async addRoleAuthorizations() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys(),
      ];
      await bindUnitAuthorizations({
        unitId: this.unitId,
        authorizationIds: keys.join(","),
      }).then((res) => {
        if (res.resultCode == "200") {
          this.$message({
            type: "success",
            message: "分配权限成功",
            offset: 400,
            duration: 1000,
          });
        } else {
          this.$message({
            type: "error",
            message: "分配权限失败",
            offset: 400,
            duration: 1000,
          });
        }
      });
      this.unitDialogVisible = false;
    },
    setDialogWidth() {
      var val = document.body.clientWidth;
      const def = 750; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
  },
};
</script>

<style scoped>
.content {
  margin: 0 0.08rem;
  font-size: 0.07rem;
  height: 90vh;
}

.bg-purple {
  background: #d3dce6;
  height: 0.15rem;
  font-size: 0.07rem;
  line-height: 0.15rem;
  padding-left: 0.05rem;
}
.el-button {
  font-size: 0.07rem;
}
.el-table-box {
  margin-bottom: 0.1rem;
  display: block;
  height: 65vh;
  overflow: auto;
}
.el-table::before {
  z-index: inherit;
}
table {
  text-align: center;
}
.buttonfrom {
  margin-left: 1.5rem;
}
.el-input {
  width: 1.2rem;
}
.el-select {
  width: 1.2rem;
}
</style>

  


